<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>正向消息："{{ message }}"</p>
        <p>反向消息："{{ reversedMessage }}"</p>

        <span>————————————————————————————————————————————————</span>
        <div>{{msg}}</div>
        <div>{{msg2}}</div>
        <div>
            <input v-model="msg">
        </div>
        <span>————————————————————————————————————————————————</span>

        <div>{{ msg3}}</div>
        <div>{{ msg4}}</div>
        <input v-model="msg3">

        <div>
            <span> ———————————————————————————————————————————————— </span>
            <div>姓:{{x}}</div>
            <div>名:{{m}}</div>
            <div>sex:{{sex}} </div>
            <div>
                <input v-model="x">

                <input v-model="m">

                <input v-model="sex">

                <input v-model="name">
            </div>

        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                msg: "1",
                msg2: '0',
                msg3: "1",
                msg4: "2",

                x: "李",
                m: "白菜",
                sex: "男",
            },
            //反向消息
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    this.reversedMessage = split('').reverse().join('');
                }
            },
            //   数字计算
            computed: {
                msg2: function () {
                    return parseInt(this.msg) + parseInt(this.msg);
                }
            },
            //     监听
            watch: {
                msg3: function (v) {
                    console.log("发生了改变了，现在是：" + v);
                    return this.msg4 = parseInt(athis.msg4) * 2 + parseInt(this.msg4) * 2;
                    //msg4 在msg3的基础上 进行计算
                }
            },
            //get   set
            computed: {
                name: {
                    get: function () {
                        return this.x + this.m;
                    },
                    set: function (v) {
                        var s = v.split("");
                        this.x = s.shift();
                        this.m = s.join('');
                        this.sex = s.shift('');


                    }
                },
            }
        })


    </script>

</body>

</html>